<template>
  <div class="space-left">
    <div>空间列表：</div>
    <div class="space-tree">
      <el-input placeholder="空间名" v-model="filterText" suffix-icon="el-icon-search" size="small" class="space-input"/>
      <el-tree
        class="filter-tree"
        :data="treeData"
        :props="defaultProps"
        :filter-node-method="filterNode"
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
        ref="tree"
      >
      <span class="custom-tree-node" slot-scope="{ node }">
        <!-- <i class="el-icon-school"></i> -->
        <span :title='node.label || "-"'>{{node.label}}</span>
      </span>
      </el-tree>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    treeData: {
      type: Array,
      default: () => ([])
    }
  },
  data () {
    return {
      filterText: '',
      defaultProps: {
        label: 'name',
        children: 'children'
      }
    }
  },
  computed: {},
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    filterNode (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    handleNodeClick (data) {
      this.$emit('nodeClick', {
        id: data.id,
        name: data.name,
        mapUrl: data.mapUrl,
        tag: data.tag
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.space-left {
  width: 260px;
  height: 800px;
  box-sizing: border-box;
  padding-right: 10px;
  border-right: 1px solid #E4E7ED;
  .space-tree {
    .space-input {
      margin: 10px 0;
    }
    .filter-tree {}
  }
}
</style>
